iT邦幫忙

2023 iThome 鐵人賽
DAY 5
0
Modern Web

給前端新手的圖文故事系列 第 5 篇

關於那些偽元素的故事

15th鐵人賽
257 瀏覽

  • 分享至 

  • xImage
    •  

常用虛擬類別選擇器

虛擬類別選擇器主要是拿來處理一些狀態或是不同條件的情況，如 hover 就是幫區塊的滑入狀態進行定義，而 first-child 就是哪來選擇第一個元素標籤等等。

以下我們為了方便練習測試操作，可以先將以下這個結構複製到本地的檔案上進行練習，他的目的是為了協助我們取得一個完全畫面上至中的顯示區塊，以利我們進行練習。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* 宣告全部的元素不要有靠外與靠內距離 */
      * {
        margin: 0;
        padding: 0;
      }

      /* 宣告我們的 body 為 flexbox(彈性盒子) 並且至中顯示 */
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 因為網頁預設高度沒有延長到 100 %，因此我們先將畫面設置到最低 100vh */
        min-height: 100vh;
      }
    /* 稍後撰寫 CSS 樣式的地方 */
    </style>
  </head>
  <body>
    <!--   稍後撰寫 HTML 的地方   -->
  </body>
</html>

:hover 滑鼠滑入時的樣式

CSS 樣式

a {
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

a:hover {
  background-color: royalblue;
}

HTML 結構

<a>Click Me!</a>

:active 當區塊被點擊啟用時

CSS 樣式

a {
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

a:hover,a:active {
  background-color: royalblue;
}

HTML 結構

<a>Click Me!</a>

:not 不符合選擇器名稱的元素

CSS 樣式

a:not(.button) {
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

HTML 結構

<a class="button">Click Me!</a>
<a>Click Me!</a>

:first-child 第一個元素

CSS 樣式

ul {
  width: 60%;
  /* 設置左方項目樣式為沒有東西 */
  list-style-type: none;
  /* 設置文字置中顯示 */
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:first-child {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

:last-child 最後一個元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:last-child {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

:only-child 只有一個元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:only-child {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

這裡可以將 li 刪除到只剩一個來查看效果

多元素 單元素

:nth-child(數字) 選擇第幾個元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-child(4) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

:nth-child(2n) 選擇2的倍數的元素，n代表乘機可做復合運算

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-child(2n) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
</ul>

n 是一個會從 0 開始計數的值，且可以搭配加減進行設計

計算方式 計算結果
n-2 1,2,3,4,5...
n+2 2,3,4,5,6...
2n-1 1,3,5,7,9...
2n+1 1,3,5,7,9...
3n-1 2,5,8,11,14...
3n+1 1,4,7,10,13...

:nth-child(odd) 選擇奇數元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-child(odd) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
</ul>

:nth-child(even) 選擇偶數元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-child(even) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li> // 受影響元素
</ul>

:nth-last-child(數字) 選擇從後面數過來第幾個元素

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-last-child(3) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li>
</ul>

綜合操作

CSS 樣式

ul {
  width: 60%;
  list-style-type: none;
  text-align: center;
}

ul > li {
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

ul > li:nth-child(n + 3):nth-last-child(n + 3) {
  background-color: royalblue;
}

HTML 結構

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li> // 受影響元素
  <li>Item</li> // 受影響元素
  <li>Item</li> // 受影響元素
  <li>Item</li> // 受影響元素
  <li>Item</li>
  <li>Item</li>
</ul>

常用偽元素

偽元素是協助 css 再不添加額外 html 元素的情況下，能有更多的區塊能加入設計，最早是拿來設計關鍵字的 "" 顯示，而如今則多半被拿來進行動畫與特效的設計。

以下兩個常用的 before 與 after 需搭配 content 的屬性宣告，才能在 html 標籤上建立相應的偽元素。

::before 加入在元素前內容並套用樣式

CSS 樣式

a {
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

a::before {
  content: 'before';
}

HTML 結構

<a>Click Me!</a>

::after 加入在元素後內容並套用樣式

CSS 樣式

a {
  padding: 1rem 2rem;
  border: royalblue solid 1px;
}

a::after {
  content: 'after';
}

HTML 結構

<a>Click Me!</a>

上一篇
學習基礎 CSS 概念與一些小事情
下一篇
收放自如的 FlexBox
系列文
給前端新手的圖文故事 共 30 篇
  1. 26
    學習如何使用 TypeScript 在 React 專案
  2. 27
    了解 Next.js 的應用與基礎特性
  3. 28
    了解 Next.js 路由與相關應用
  4. 29
    使用 Redux 搭配 TypeScript 作為資料流載體
  5. 30
    前端系列總結
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙